<template>
	<!-- 展示 -->
	<view v-if="orgDetailInfo!==null" style="margin: 20rpx;">
		<view>
			<img :src="orgDetailInfo.organAvatar" alt="社团封面" style="width: 100%;height: 400rpx;">
		</view>
		<h3 style="text-align: center;">{{orgDetailInfo.organName}}</h3>
		<view style="margin-top: 20rpx;font-size: smaller;color: #808080;">
			{{orgDetailInfo.organIntroduction}}
		</view>
		<u-line color="green" style="margin-top: 20rpx;" v-if="orgDetailInfo.cancelReason!==null" />
		<view style="margin-top: 20rpx;" v-if="orgDetailInfo.cancelReason!==null">
			<view style="color: red;font-weight: bolder;">申请注销原因：</view>
			<view style="margin-top: 20rpx;">{{orgDetailInfo.cancelReason}}</view>
		</view>
		<view style="margin-top: 80rpx;display: flex;justify-content: space-around;">
			<u-button type="success" @click="agree(orgId)">同意申请</u-button>
			<u-button type="error" @click="refuse(orgId)">拒绝申请</u-button>
		</view>

		<!-- 拒绝申请弹出层 -->
		<u-popup v-model="show" mode="center" width="600">
			<view style="margin: 40rpx;">
				<h3 style="text-align: center;">拒绝原因</h3>
				<u-input style="height: 240rpx;margin-top: 20rpx;margin-bottom: 20rpx;" :border="true"
					v-model="judgeRequest.reason" type="textarea" label="拒绝原因" placeholder="请输入拒绝原因" />
				<u-button type="success" @click="refuseApply">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// navigate.vue页面接受参数
	export default {
		data() {
			return {
				show: false,
				orgId: null,
				orgDetailInfo: null,
				judgeRequest: {
					id: null,
					result: null,
					reason: null
				}
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.orgId = option.orgId
			// 获取社团详情
			this.getOrgDetail()
		},
		methods: {
			// 同意申请
			agree(orgId) {
				this.judgeRequest.id = orgId
				this.judgeRequest.result = 0
				uni.showModal({
					content: '您确定同意该社团的申请吗?',
					success: res => {
						if (res.confirm) {
							this.judge()
						}
					}
				});
			},
			// 拒绝申请
			refuse(orgId) {
				this.judgeRequest.id = orgId
				this.judgeRequest.result = 1
				// 弹出层打开
				this.show = true
			},
			refuseApply() {
				this.show = false;
				uni.showModal({
					title: '审批',
					content: '您确定拒绝该申请吗?',
					confirmTextColor: 'red',
					success: res => {
						if (res.confirm) {
							this.judge();
							this.judgeRequest.appId = null;
							this.judgeRequest.reason = null;
						} else {
							this.show = true
						}
					}
				})
			},
			// 发送请求
			judge() {
				this.$http.request({
					url: '/organizations/web/organization/check',
					method: 'POST',
					data: this.judgeRequest
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: (res) => {
								uni.navigateBack()
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取社团详情
			getOrgDetail() {
				this.$http.request({
					url: `/organizations/web/organization/orgDetail/${this.orgId}`
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.orgDetailInfo = res.data
					} else {
						uni.showToast({
							title: '获取社团详情失败',
							mask: true,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
</style>
